/* 引入less */
/* 重置样式 */
require('../css/commCss/normalize.css')
/* 重置样式补充 */
require('../css/commCss/reset.css')
/* 公共样式 */
require('../css/commCss/property.css')
/* 公共属性 */
require('../css/commCss/basic.less')
/* 字体图标 */
require('../fonts/iconfont.css')
/* 当前页面 */
require('../css/motionData.less')


//导入axios
const axios = require('axios')
/* 导入echarts */
const myCharts = require('echarts');

document.addEventListener('DOMContentLoaded', function () {
    //向后台发送请求
    axios.get("http://139.9.177.51:8099/users/mysportsBadge?userId=" + localStorage.userId).then(function (res) {
        console.log(res.data);
        //运动总时间
        document.querySelector("#times").textContent = Math.ceil(res.data.data.sports.times);
        //本周消耗卡路里
        document.querySelectorAll(".calorie")[0].textContent = Math.ceil(res.data.data.sports.calorie);
        //总卡路里
        document.querySelectorAll(".calorie")[1].textContent = Math.ceil(res.data.data.sports.calorie) + '千卡'
        //累计天数
        document.querySelectorAll(".punchin")[0].textContent = res.data.data.sports.punchin + '天';
        //连续天数
        document.querySelectorAll(".punchin")[1].textContent = res.data.data.sports.punchin + '天';
        //头像
        document.querySelector("#userImgUrl").src = res.data.data.user.imgurl
    })

    //点击返回图标返回上一页面
    document.querySelector("#iconReturn").addEventListener("click", function () {
        history.go(-1);
    })

    let xData = ['2-5', '2-6', '2-7', '2-8', '2-9', '2-10', '2-11'];
    let yData = [30, 60, 30, 120, 80, 80, 60];

    /* 绘制图表 */
    drewHistogram(xData,yData)
    function drewHistogram(x,y) {
        var myChart = myCharts.init(document.querySelector("#main1"));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '近7天运动时长',
                textStyle: {
                    fontSize: 14,
                }
            },
            tooltip: {},
            legend: {},
            xAxis: {
                data: x,
                nameTextStyle: {
                    fontSize: 10,
                }
            },
            yAxis: {
                max:140
            },
            series: [{
                type: 'bar',
                data: y,
                itemStyle: {
                    color: '#83A7D1',
                }
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    //饼状图
    drewPieChart()
    function drewPieChart() {
        var myChart = myCharts.init(document.querySelector("#main2"));
        // 指定图表的配置项和数据
        option = {
            title: {
              text: '运动分类',
              left: 'left',
              textStyle: {
                fontSize: 14,
            }
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              top:"center",
              icon: 'rect',
              itemWidth: 10,
              itemHeight: 10
            },
            series: [
              {
                name: '运动分类',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: 25, name: '跑步' ,itemStyle:{color:'#736171'}},
                  { value: 35, name: '骑行' ,itemStyle:{color:'#EE5C43'}},
                  { value: 40, name: '训练' ,itemStyle:{color:'#58BB92'}},
                  
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                },

                label:{
                    formatter:'{d}%',
                    position:"inside" ,
                    color:'#fff',
                }
              }
            ]
          };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    //堆叠条形图
    StackedBarChart()
    function StackedBarChart(){
        var myChart = myCharts.init(document.querySelector("#main3"));
        // 指定图表的配置项和数据
        option = {
            title: {
              text:'近7日运动分类',
               textStyle: {
                          fontSize: 14,
                      }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
              }
            },
            legend: {
                left: 'right',
                top: 'middle',
                align: 'left',
                orient: 'vertical',
                icon: 'rect',
                itemWidth: 10,
                itemHeight: 10
            },
            grid: {
              left: '3%',
              right: '14%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              min: 0,
              max: 100
            },
            yAxis: {
              type: 'category',
              data: ['2-5', '2-6', '2-7', '2-8', '2-9', '2-10', '2-11']
            },
            series: [
              {
                name: '跑步',
                type: 'bar',
                stack: 'total',
                label: {
                  /* show: true */
                },
                emphasis: {
                  focus: 'series'
                },
                data: [5, 22, 16, 16, 25, 40, 30],
                itemStyle:{color:'rgb(85, 142, 213)'}
              },
              {
                name: '骑行',
                type: 'bar',
                stack: 'total',
                label: {
                  /* show: true */
                },
                emphasis: {
                  focus: 'series'
                },
                data: [15, 36, 16, 18, 25, 20, 28],
                itemStyle:{color:'rgb(147, 205, 221)'} 
              },
              {
                name: '训练',
                type: 'bar',
                stack: 'total',
                label: {
                  /* show: true */
                },
                emphasis: {
                  focus: 'series'
                },
                data: [22, 20, 30, 16, 6, 38, 25],
                itemStyle:{color:'rgb(146, 208, 80)'} 
              },
              
            ]
          };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    //折线图
    lineChart()
    function lineChart(){
        var myChart = myCharts.init(document.querySelector("#main4"));
        option = {
            title:{
                text: '近7日训练次数',
                textStyle: {
                    fontSize: 14,
                }
                
            },
            xAxis: {
              type: 'category',
              data: ['2-5', '2-6', '2-7', '2-8', '2-9', '2-10', '2-11']
            },
            yAxis: {
              type: 'value',
              max: 10
            },
            series: [
              {
                symbol: 'none',
                data: [2, 5, 5, 8, 2, 4, 5],
                type: 'line',
                lineStyle: {
                    color: 'green'
                }
              }
            ]
          };

         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
    }


})